<template>
    <div>
        <!-- 使用计算属性的方式 -->
        <h3>Reversed message1: {{reversedMessage1}}</h3>
        <!-- 使用methods函数的方式 -->
        <h3>Reversed message1: {{reversedMessage2()}}</h3>

        <!-- 使用forceUpdate强制更新模板 -->
        <button @click="()=> $forceUpdate()">forceUpdate</button>
        <br />
        <input v-model="message"/>
    </div>
</template>

<script>
    export default {
        name: 'Computed',
        data() {
            return {
                message: 'hello world'
            }
        },
        computed: {
            reversedMessage1:function() {
                console.log('执行了reversedMessage1');
                return this.message.split("").reverse().join("")
            }
        },
        methods: {
            // 当强制更新模板的时候 执行了methods的方法 并没有执行computed计算属性
            // 因为计算属性中是有缓存的 模板没有发生变化的时候是不会执行的
            reversedMessage2() {
                console.log('执行了reversedMessage2');
                return this.message.split("").reverse().join("")
            }
        },
       
    }
</script>
